/*
 * @Author: weidewei
 * @Date: 2025-11-24 09:12:17
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-24 09:56:49
 * @Description: 
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\useDeferredValue.tsx
 */
import styled from 'styled-components';
import mockjs from 'mockjs';
import { Input, List } from 'antd';

interface Item {
  id: string;
  name: number;
  title: string;
  address: string;
  age: number;
}
export default function useDeferredValueComp() {
  /* useDeferredValue 用于延迟某些状态的更新，
    直到主渲染任务完成。这对于高频更新的内容（如输入框、滚动等）非常有用，
    可以让 UI 更加流畅，避免由于频繁更新而导致的性能问题 */
  /*    const deferredValue = useDeferredValue(value)
    value: 延迟更新的值(支持任意类型)
    deferredValue: 延迟更新的值,在初始渲染期间，返回的延迟值将与您提供的值相同 */
  const [inpVal, setInpVal] = useState('');
  const [data] = useState<Item[]>(() => {
    return mockjs.mock({
      'result|1000': [
        {
          id: '@id',
          name: '@natural', // 数字
          title: '@cname',
          address: '@county(true)',
          age: '@integer(18, 60)',
        },
      ],
    }).result;
  });

  const deferredValue = useDeferredValue(inpVal);

  console.log(deferredValue, '======', inpVal);

  const isSame = deferredValue !== inpVal;
  const findAddress = () => {
    return data.filter((item) => item.address.includes(deferredValue));
  };
  return (
    <Wrapper>
      <div className="useDeferredValueComp">
        <Input placeholder='请输入地址' value={inpVal} onChange={(e) => setInpVal(e.target.value)} />
        <br />
        <List 
        dataSource={findAddress()} 
        renderItem={(item) => <List.Item>{item.address}</List.Item>} 
        style={{ opacity: isSame ? 0.5 : 1, transition: 'opacity 0.5s ease-in-out' }}
        />
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .useDeferredValueComp {
    color: #000;
  }
`;
